<template>
	<view>
		<button @click="showLocalToast">加载提示</button>
		<button @click="okToast">成功提示</button>
		<button @click="noToast">失败提示</button>
		<button @click="infoToast">信息提示</button>
		<button @click="warnToast">警告提示</button>
		<v-toast ref="toast"></v-toast>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const toast = ref(null);

const showLocalToast = () => {
	toast.value.show({
		message: '这是一个提示信息',
		type: 'loading',
		duration: 300000
	});
};

const okToast = () => {
	console.log(toast.value);
	toast.value.show({
		message: '成功',
		type: 'success',
		duration: 200000
	});
};

const noToast = () => {
	toast.value.show({
		message: '失败',
		type: 'error',
		duration: 200000,
		position: 'center'
	});
};

const infoToast = () => {
	toast.value.show({
		message: '信息',
		type: 'info',
		duration: 200000,
		position: 'bottom'
	});
};

const warnToast = () => {
	toast.value.show({
		message: '警告',
		type: 'warn',
		duration: 200000
	});
};
</script>